import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:kudos/config/widget_config.dart';
import 'package:kudos/core/utils/kudo_colors.dart';

/// 风筝教程页面 - 使用非常规类名避免重复
class KiteTutorialScreen extends StatefulWidget {
  const KiteTutorialScreen({super.key});

  @override
  State<KiteTutorialScreen> createState() => _KiteTutorialScreenState();
}

class _KiteTutorialScreenState extends State<KiteTutorialScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/tutorial_background.png'),
            fit: BoxFit.fill,
          ),
        ),
        child: Column(
          children: [
            // 顶部导航栏
            _buildFixedNavigationBar(),
            // 可滚动内容区域
            Expanded(child: _buildScrollableContent()),
          ],
        ),
      ),
    );
  }

  /// 构建顶部固定导航栏
  Widget _buildFixedNavigationBar() {
    return [
          // 左侧返回按钮
          Icon(
            Icons.arrow_back_ios,
            color: KudoColors.black,
            size: 20.sp,
          ).inkWell(onTap: () => Navigator.of(context).pop()),
          // 右侧标题
          Text('Kite Tutorial')
              .fontSize(18.sp)
              .fontFamily(GoogleFonts.lato().fontFamily)
              .fontWeight(FontWeight.w900)
              .textColor(KudoColors.black),
        ]
        .toRow(mainAxisAlignment: MainAxisAlignment.start)
        .paddingHorizontal(16.w)
        .paddingVertical(12.h)
        .safeArea(bottom: false);
  }

  /// 构建可滚动内容区域
  Widget _buildScrollableContent() {
    return SingleChildScrollView(
      padding: EdgeInsets.all(16.w),
      child: [
        // Entry-Level Model: Diamond Kite 部分
        _buildEntryLevelSection(),
        // Advanced: 2-Line Stunt Kite 部分
        _buildAdvancedSection().paddingTop(24.h),
        // Featured Model: Parafoil Kite 部分
        _buildFeaturedModelSection().paddingTop(24.h),
      ].toColumn(crossAxisAlignment: CrossAxisAlignment.start),
    );
  }

  /// 构建入门级钻石风筝部分
  Widget _buildEntryLevelSection() {
    return [
      // 标题标签
      _buildSectionTitle('Entry-Level Model: Diamond Kite'),
      // Materials 部分
      _buildSubSection(
        '• Materials',
        'Lightweight plastic sheeting (an alternative to traditional paper, wind-resistant and durable), carbon fiber poles (easier to obtain than bamboo strips), nylon thread, and a material shopping list from Amazon/Home Depot.',
      ).paddingTop(12.h),
      // Steps 部分
      _buildSubSection(
        '• Steps',
        'Focus on simplifying the skeleton assembly ("cross rod binding techniques, using heat shrink tubing to fix nodes"). The flying tutorial targets the "park lawn scene" commonly seen in Europe and the United States, emphasizing "avoiding high-voltage power lines and children\'s play areas."',
      ).paddingTop(16.h),
    ].toColumn(crossAxisAlignment: CrossAxisAlignment.start);
  }

  /// 构建高级双线特技风筝部分
  Widget _buildAdvancedSection() {
    return [
      // 标题标签
      _buildSectionTitle('Advanced: 2-Line Stunt Kite'),
      // Basic Actions 部分
      _buildSubSection(
        '• Basic Actions',
        '"Horizontal figure-eight flight" and "rotation on the spot", video demonstration of "two-handed tension difference control (pull the left line to turn left, pull the right line to turn right)", accompanied by slow motion analysis.',
      ).paddingTop(12.h),
      // Venue Selection 部分
      _buildSubSection(
        '• Venue Selection',
        'Recommend "accessible areas such as football fields and beaches" and suggest that "wind speeds of 3-6 mph (approximately 1.3-2.7 m/s) are most suitable for practice".',
      ).paddingTop(16.h),
    ].toColumn(crossAxisAlignment: CrossAxisAlignment.start);
  }

  /// 构建特色模型滑翔伞风筝部分
  Widget _buildFeaturedModelSection() {
    return [
      // 标题标签
      _buildSectionTitle('Featured Model: Parafoil Kite'),
      // Advantages Of No Skeleton 部分
      _buildSubSection(
        '• Advantages Of No Skeleton',
        'Advantages of having no frame: "It has a small storage volume and is suitable for travel." The teaching focuses on "inflation techniques (expand against the wind and let the airflow automatically fill the air chamber)" and "quickly reeling in the line when out of control."',
      ).paddingTop(12.h),
    ].toColumn(crossAxisAlignment: CrossAxisAlignment.start);
  }

  /// 构建章节标题标签
  Widget _buildSectionTitle(String title) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 4.h),
      decoration: BoxDecoration(
        color: Colors.yellow,
        borderRadius: BorderRadius.circular(11.r),
      ),
      child: Text(title)
          .fontSize(16.sp)
          .italic()
          .fontWeight(FontWeight.w900)
          .fontFamily(GoogleFonts.lato().fontFamily)
          .textColor(KudoColors.black),
    ).configWidget(borderRadius: 11.r);
  }

  /// 构建子章节内容
  Widget _buildSubSection(String subtitle, String content) {
    return [
      // 子标题
      Text(subtitle)
          .fontSize(14.sp)
          .fontWeight(FontWeight.bold)
          .fontFamily(GoogleFonts.lato().fontFamily)
          .textColor(KudoColors.black),
      // 内容文字
      Text(content)
          .fontSize(13.sp)
          .fontFamily(GoogleFonts.lato().fontFamily)
          .textColor(KudoColors.black)
          .paddingTop(8.h)
          .paddingLeft(16.w),
    ].toColumn(crossAxisAlignment: CrossAxisAlignment.start);
  }
}
